<template>
  <div class="online-query-form" :class="{ 'select-dialog': isSelect }" :style="{ height: height ? height : '100%' }"
    v-show="isReady">
    <template v-if="dialogParams.fullscreen && !dialogParams.isEdit">
      <el-container>
        <el-header style="height: 72px; background: white">
          <el-row type="flex" align="middle" style="justify-content: space-between; width: 100%; height: 100%">
            <div style="display: flex; height: 40px; line-height: 40px">
              <!-- Jie. 20250719 有图标更好看一些 -->
              <i class="header-logo online-icon icon-orange-icon"
                style="font-size: 40px; color: #fda834; background: rgb(255 119 0 / 10%)" />
              <span style="font-size: 22px; color: #333; font-weight: bold">捷卓运营管理系统</span>
              <el-divider direction="vertical" style="height: 26px; margin: 7px 8px" />
              <span style="font-size: 18px; color: #333; font-weight: bold">{{
                form2.formName
              }}</span>
            </div>
            <el-button link size="default" :icon="Close" style="font-size: 24px; color: #909399" @click="onCancel" />
          </el-row>
        </el-header>
        <!-- Jie. 20250716 修改模块样式 -->
        <el-main style="width: 100%; padding: 15px; background: #f6f6f6">
          <div class="online-query-form" style="height: calc(100vh - 105px)">
            <OnlineFilterBox class="query-filter-box" :isEdit="dialogParams.isEdit" ref="filterBox"
              :itemWidth="form2.filterItemWidth || 350"
              :style="{ 'margin-bottom': dialogParams.isEdit ? '10px' : '0px' }" :widgetList="activeWidgetList"
              :formData="formData" :operationList="activeOperationList" @widgetClick="onWidgetClick"
              @search="refreshTable(true)" @reset="onReset" @copy="onCopyWidget" @delete="onDeleteWidget"
              @operationClick="onOperationClick" @update:widgetList="updateWidgetList" />
            <div class="query-table-box custom-widget-item widget-item" :class="{
              active: dialogParams.isEdit && currentWidget === queryTable,
            }" style="margin-top: 13px" :style="{
              padding: dialogParams.isEdit && currentWidget === queryTable ? '2px' : '0px',
            }" @click.stop="onTableClick">
              <OnlineCustomTable ref="table" :dataList="queryTableWidget.dataList" :isEdit="dialogParams.isEdit"
                :widget="queryTable" :multiSelect="batchDelete" :operationList="activeOperationList"
                :getTableIndex="queryTableWidget.getTableIndex" :sortChange="queryTableWidget.onSortChange"
                :onSelectChange="onSelectRowChange" :treeConfig="getTableTreeConfig"
                @refresh="customQueryParams => refreshTable(false, customQueryParams)"
                @operationClick="onOperationClick" @widgetClick="onWidgetClick"
                @updateChildWidgetList="onChildWidgetChange" />
            </div>
            <!-- Jie. 20250716 修改分页样式 -->
            <el-row type="flex" justify="end"
              style="padding-bottom: 16px; background: white; padding-right: 25px; margin-top: -1px" v-if="
                queryTable && queryTable.props.paged && getTableTreeConfig == null && !supportGroup
              ">
              <el-pagination :total="queryTableWidget.totalCount" :current-page="queryTableWidget.currentPage"
                :page-size="queryTableWidget.pageSize" :page-sizes="[10, 20, 50, 100]"
                layout="total, prev, pager, next, sizes" @current-change="queryTableWidget.onCurrentPageChange"
                @size-change="queryTableWidget.onPageSizeChange" />
            </el-row>
          </div>
        </el-main>
      </el-container>
    </template>
    <template v-else>
      <OnlineFilterBox class="query-filter-box" :isEdit="dialogParams.isEdit" ref="filterBox"
        :itemWidth="form2.filterItemWidth || 350" style="margin-bottom: 16px" :widgetList="activeWidgetList"
        :formData="formData" :operationList="activeOperationList" @widgetClick="onWidgetClick"
        @search="refreshTable(true)" @reset="onReset" @copy="onCopyWidget" @delete="onDeleteWidget"
        @operationClick="onOperationClick" @update:widgetList="updateWidgetList" />
      <div class="query-table-box custom-widget-item widget-item"
        :class="{ active: dialogParams.isEdit && currentWidget === queryTable }"
        :style="{ padding: dialogParams.isEdit ? '0' : '' }" @click.stop="onTableClick">
        <OnlineCustomTable ref="table" :dataList="queryTableWidget.dataList" style="height: 100%"
          :isEdit="dialogParams.isEdit" :widget="queryTable" :multiSelect="batchDelete || (isSelect && multiple)"
          :singleSelect="isSelect && !multiple" :isSelectDialog="isSelect" :operationList="activeOperationList"
          :getTableIndex="queryTableWidget.getTableIndex" :sortChange="queryTableWidget.onSortChange"
          :onSelectChange="onSelectRowChange" :onRadioChange="onRadioRowChange" :treeConfig="getTableTreeConfig"
          @operationClick="onOperationClick" @refresh="customQueryParams => refreshTable(false, customQueryParams)"
          @widgetClick="onWidgetClick" @updateChildWidgetList="onChildWidgetChange">
          <template v-slot:pagination>
            <el-row type="flex" :justify="isSelect ? 'space-between' : 'end'" style="margin-top: 16px" v-if="
              queryTable && queryTable.props.paged && getTableTreeConfig == null && !supportGroup
            ">
              <el-pagination :total="queryTableWidget.totalCount" :current-page="queryTableWidget.currentPage"
                :page-size="queryTableWidget.pageSize" :page-sizes="[10, 20, 50, 100]"
                layout="total, prev, pager, next, sizes" @current-change="queryTableWidget.onCurrentPageChange"
                @size-change="queryTableWidget.onPageSizeChange" />
              <div v-if="isSelect">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onSubmit">确认选择</el-button>
              </div>
            </el-row>
            <!-- Jie. 20250707 增加分组和树形表格的确认按钮 -->
            <el-row type="flex" justify="end" style="margin-top: 16px"
              v-if="isSelect && (getTableTreeConfig != null || supportGroup)">
              <div>
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onSubmit">确认选择</el-button>
              </div>
            </el-row>
          </template>
        </OnlineCustomTable>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { API_CONTEXT } from '@/api/config';
import { useTable } from '@/common/hooks/useTable';
import { useUpload } from '@/common/hooks/useUpload';
import { download, post } from '@/common/http/request';
import {
  OnlineFormEventType,
  SysCustomWidgetBindDataType,
  SysCustomWidgetOperationType,
} from '@/common/staticDict';
import { SysOnlineColumnFilterType } from '@/common/staticDict/online';
import { TableOptions } from '@/common/types/pagination';
// Jie. 20250718 导入日期处理函数
import { formatDate, treeDataTranslate } from '@/common/utils';
import { DialogProp } from '@/components/Dialog/types';
import { useThirdParty } from '@/components/thirdParty/hooks';
import { ThirdProps } from '@/components/thirdParty/types';
import OnlineCustomTable from '@/online/components/OnlineCustomTable.vue';
import widgetData from '@/online/config/index';
import { ANY_OBJECT } from '@/types/generic';
import { Close } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import { useDict } from '../../hooks/useDict';
import { useForm } from '../hooks/useForm';
// import OnlineFilterBox from './OnlineFilterBox.vue';
import OnlineFilterBox from '@/online/components/OnlineFilterBox.vue';
// Jie. 20250717 导入Api脚本
import { OnlineApiController } from '@/api/online';

const router = useRouter();
interface IProps extends ThirdProps {
  formConfig: ANY_OBJECT;
  height?: string;
  masterTableData?: ANY_OBJECT;
  // 是否表单编辑模式
  isEdit?: boolean;
  readOnly?: boolean;
  // 当前选中组件
  currentWidget?: ANY_OBJECT | null;
  // 是否全屏弹窗
  fullscreen?: boolean;
  mode: string;
  // 当使用Dialog.show弹出组件时，须定义该prop属性，以便对dialog进行回调
  dialog?: DialogProp<ANY_OBJECT | ANY_OBJECT[] | undefined>;
  isSelect?: boolean;
  multiple?: boolean;
  dialogData?: ANY_OBJECT;
  openEvent?: (params: ANY_OBJECT, instanceData: ANY_OBJECT) => ANY_OBJECT;
}

const emit = defineEmits<{
  widgetClick: [ANY_OBJECT | null];
  tableClick: [ANY_OBJECT | null];
}>();

const props = withDefaults(defineProps<IProps>(), {
  isEdit: false,
  readOnly: false,
  fullscreen: false,
  mode: 'pc',
  isSelect: false,
  multiple: false,
});

const { onCloseThirdDialog } = useThirdParty(props);
const { fetchUpload } = useUpload();

const batchDelete = ref(false);
const selectRows = ref<ANY_OBJECT[]>([]);

const queryTable = computed(() => {
  return form2.value.tableWidget;
});
const activeWidgetList = computed(() => {
  return form2.value.widgetList;
});

const supportGroup = computed(() => {
  return (
    queryTable.value &&
    queryTable.value.props.groupColumn != null &&
    queryTable.value.props.groupColumn !== ''
  );
});

const onCancel = () => {
  if (props.dialog) {
    props.dialog.cancel();
  } else {
    onCloseThirdDialog(false);
  }
};

const onSubmit = () => {
  if (props.dialog) {
    if (props.isSelect) {
      if (selectRows.value.length == 0) {
        return ElMessage.error('请选择数据');
      }
      if (props.multiple) {
        props.dialog.submit(selectRows.value);
      } else {
        props.dialog.submit(selectRows.value[0]);
      }
    }
  } else {
    onCloseThirdDialog(false);
  }
};

const refreshTable = (reloadData = false, queryParams = undefined) => {
  customQueryParams.value = queryParams;
  if (dialogParams.value.isEdit) return;
  if (reloadData) {
    queryTableWidget.refreshTable(true, 1);
  } else {
    queryTableWidget.refreshTable();
  }
};

const { getDictDataList } = useDict();
const {
  isReady,
  dialogParams,
  form: form2,
  formData,
  getWidgetValue,
  getWidgetProp,
  getWidgetVisible,
  onValueChange,
  onWidgetValueChange,
  getDropdownParams,
  checkOperationPermCode,
  checkOperationDisabled,
  checkOperationVisible,
  cloneWidget,
  handlerOperation,
  handlerScriptOperation,
  tableInstance,
  loadOnlineFormConfig,
  getIgnoreMaskFields,
  onPrint,
  initPage,
  initFormWidgetList,
  initWidgetLinkage,
  onStartFlow,
  loadOnlineDictList,
  showDialog,
  showOnlineDialog,
  instanceData,
} = useForm({
  props,
  router,
  formRef: undefined,
  close: onCancel,
  refresh: refreshTable,
});

provide('form', () => {
  return {
    ...form2.value,
    mode: props.mode || 'pc',
    isEdit: props.isEdit,
    readOnly: props.readOnly,
    formData: formData,
    getWidgetValue: getWidgetValue,
    getWidgetProp: getWidgetProp,
    getWidgetVisible: getWidgetVisible,
    onValueChange: onValueChange,
    onWidgetValueChange: onWidgetValueChange,
    getDropdownParams: getDropdownParams,
    checkOperationPermCode: checkOperationPermCode,
    checkOperationDisabled: checkOperationDisabled,
    checkOperationVisible: checkOperationVisible,
    cloneWidget: cloneWidget,
    onPrint: onPrint,
    onStartFlow: onStartFlow,
    handlerScriptOperation: handlerScriptOperation,
    tableInstance: tableInstance,
    handlerOperation: handlerOperation,
    getIgnoreMaskFields: getIgnoreMaskFields,
    showDialog: showDialog,
    getDictDataList: getDictDataList,
    loadOnlineFormConfig: loadOnlineFormConfig,
    loadOnlineDictList: loadOnlineDictList,
    getTableData: () => [],
    isActive: (widget: ANY_OBJECT) => {
      return props.currentWidget === widget;
    },
    getWidgetObject: widgetData.getWidgetObject,
    instanceData: () => instanceData,
  };
});

const customQueryParams = ref<ANY_OBJECT>([]);

const updateWidgetList = widgetList => {
  form2.value.widgetList = widgetList;
  // activeWidgetList.value = widgetList;
};

const onChildWidgetChange = val => {
  queryTable.value.childWidgetList = val;
};

const getQueryParams = () => {
  if (Array.isArray(activeWidgetList.value)) {
    return activeWidgetList.value
      .map(widget => {
        if (
          widget.bindData.dataType !== SysCustomWidgetBindDataType.Column ||
          widget.column == null
        )
          return null;
        let column = widget.column;
        let paramValue = getWidgetValue(widget);
        if (
          paramValue == null ||
          paramValue === '' ||
          (Array.isArray(paramValue) && paramValue.length === 0)
        )
          return null;
        let temp: ANY_OBJECT = {
          tableName: widget.table.tableName,
          columnName: widget.column.columnName,
          filterType: widget.column.filterType,
          columnValue:
            widget.column.filterType !== SysOnlineColumnFilterType.RANFGE_FILTER
              ? paramValue
              : undefined,
        };

        if (column.filterType === SysOnlineColumnFilterType.RANFGE_FILTER) {
          temp.columnValueStart = paramValue[0];
          temp.columnValueEnd = paramValue[1];
        }

        return temp;
      })
      .filter(item => item != null);
  }
  return [];
};

const table = ref();
const getQueryString = () => {
  if (table.value) {
    let queryTable = table.value;
    if (Array.isArray(table.value)) {
      queryTable = table.value[0].value;
    }
    if (queryTable) {
      return queryTable.getSearchString();
    }
  }
  return null;
};

const loadTableData = async (params: ANY_OBJECT) => {
  let table = form2.value.tableMap.get(queryTable.value.bindData.tableId);
  if (!table) {
    console.warn('table is undefined tableId=', queryTable.value.bindData.tableId);
    throw new Error();
  }

  params.datasourceId = table.datasource.datasourceId;
  params.filterDtoList = getQueryParams();

  if (queryTable.value.relation != null) {
    params.relationId = table.relation.relationId;
    params.filterDtoList.push({
      tableName: queryTable.value.table.tableName,
      columnName: queryTable.value.relation.slaveColumn.columnName,
      filterType: SysOnlineColumnFilterType.EQUAL_FILTER,
      columnValue: (dialogParams.value.masterTableData || {})[
        queryTable.value.relation.masterColumn.columnName
      ],
    });
  }
  let queryString = getQueryString();
  // 模糊查询
  if (
    Array.isArray(queryTable.value.props.likeQueryColumn) &&
    queryTable.value.props.likeQueryColumn.length > 0 &&
    queryString != null &&
    queryString !== ''
  ) {
    let queryColumn = queryTable.value.props.likeQueryColumn
      .map(item => {
        return item.join('.');
      })
      .join(',');
    if (!Array.isArray(params.filterDtoList)) params.filterDtoList = [];
    params.filterDtoList.push({
      columnName: queryColumn,
      filterType: 14,
      columnValue: queryString,
    });
  }
  // 自定义查询
  if (customQueryParams.value != null) {
    params.customFilterGroupList = customQueryParams.value;
  }
  // 脱敏设置
  params.ignoreMaskFields = getIgnoreMaskFields(queryTable.value);
  if (!Array.isArray(params.orderParam) || params.orderParam.length <= 0) {
    // Jie. 20050418 增加排序参数
    let { orderColumn, orderAsc } = queryTable.value.props;
    if (orderColumn) {
      params.orderParam = [
        {
          fieldName: orderColumn,
          asc: !!orderAsc,
        },
      ];
    }
  }

  if (
    !dialogParams.value.isEdit &&
    typeof queryTable.value.eventInfo[OnlineFormEventType.BEFORE_LOAD_TABLE_DATA] === 'function'
  ) {
    params = await queryTable.value.eventInfo[OnlineFormEventType.BEFORE_LOAD_TABLE_DATA](
      params,
      instanceData,
    );
  }
  if (props.isSelect && props.openEvent) {
    params = await props.openEvent(params, instanceData);
  }
  if (params == null) {
    throw new Error();
  }

  let res;
  // Jie. 20250715 查询列表可自定义Api
  if (queryTable.value.props.customApi) {
    const { apiType, apiUrl, apiScript } = queryTable.value.props;
    if (apiType == 'api' && !apiUrl) {
      throw new Error('请设置列表自定义ApiUrl');
    }
    if (apiType == 'script' && !apiScript) {
      throw new Error('请设置列表自定义Api脚本');
    }
    if (apiType == 'api') {
      res = await post(apiUrl, params);
    }
    if (apiType == 'script') {
      res = await OnlineApiController.runScript({
        scriptCode: apiScript,
        scriptParam: params,
      });
    }
  } else {
    if (table.relation != null) {
      res = await post(
        API_CONTEXT +
        '/online/onlineOperation/listByOneToManyRelationId/' +
        table.datasource.variableName,
        params,
      );
    } else {
      res = await post(
        API_CONTEXT + '/online/onlineOperation/listByDatasourceId/' + table.datasource.variableName,
        params,
      );
    }
  }

  if (
    !dialogParams.value.isEdit &&
    typeof queryTable.value.eventInfo[OnlineFormEventType.AFTER_LOAD_TABLE_DATA] === 'function'
  ) {
    res.data.dataList = await queryTable.value.eventInfo[OnlineFormEventType.AFTER_LOAD_TABLE_DATA](
      res.data.dataList,
      instanceData,
    );
  }
  if (
    queryTable.value &&
    queryTable.value.props.treeFlag &&
    queryTable.value.props.parentIdColumn
  ) {
    res.data.dataList = treeDataTranslate(
      res.data.dataList,
      primaryColumnName.value,
      queryTable.value.props.parentIdColumn,
    );
  }
  selectRows.value = [];
  return {
    dataList: res.data.dataList,
    totalCount: res.data.totalCount,
  };
};
const loadTableDataVerify = () => {
  return true;
};

const getTableTreeConfig = computed(() => {
  if (
    queryTable.value &&
    queryTable.value.props.treeFlag &&
    queryTable.value.props.parentIdColumn
  ) {
    return {
      rowField: primaryColumnName.value,
      parentField: queryTable.value.props.parentIdColumn,
    };
  } else {
    return null;
  }
});

let paged = true;
const tableWidget = dialogParams.value.formConfig?.tableWidget;
if (
  tableWidget &&
  tableWidget.props &&
  tableWidget.props.treeFlag &&
  tableWidget.props.parentIdColumn
) {
  paged = false;
} else {
  paged = tableWidget?.props?.paged;
}

const tableOptions: TableOptions<ANY_OBJECT> = {
  loadTableData: loadTableData,
  verifyTableParameter: loadTableDataVerify,
  paged: supportGroup.value ? false : paged,
};
const queryTableWidget = reactive(useTable(tableOptions));

const onTableClick = () => {
  emit('tableClick', queryTable.value);
};
const onWidgetClick = (widget: ANY_OBJECT | null) => {
  emit('widgetClick', widget);
};

const activeOperationList = computed(() => {
  return form2.value.operationList;
});
const primaryColumnName = computed(() => {
  if (dialogParams.value.isEdit) return;
  let table = form2.value.tableMap.get(queryTable.value.bindData.tableId);
  if (table && Array.isArray(table.columnList)) {
    for (let i = 0; i < table.columnList.length; i++) {
      let column = table.columnList[i];
      if (column.primaryKey) {
        return column.columnName;
      }
    }
  }
  return null;
});

const onCopyWidget = (widget: ANY_OBJECT) => {
  activeWidgetList.value.push(widget);
};
const onDeleteWidget = (widget: ANY_OBJECT) => {
  ElMessageBox.confirm('是否删除此组件？', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      let index = form2.value.widgetList.indexOf(widget);
      if (index !== -1) {
        form2.value.widgetList.splice(index, 1);
      }
      onWidgetClick(null);
    })
    .catch(e => {
      console.warn(e);
    });
};
const onSelectRowChange = (rows: ANY_OBJECT[]) => {
  selectRows.value = rows;
};

const onRadioRowChange = (row: ANY_OBJECT) => {
  selectRows.value = [row];
};

const onBatchDelete = () => {
  if (selectRows.value.length <= 0) {
    ElMessage.error('请选择要批量删除的数据！');
    return;
  }
  ElMessageBox.confirm('是否删除选中数据？', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    let table = form2.value.tableMap.get(queryTable.value.bindData.tableId);
    let params = {
      datasourceId: table.datasource.datasourceId,
      relationId: (table.relation || {}).relationId,
      dataIdList: selectRows.value
        .map(item => {
          return item[primaryColumnName.value];
        })
        .filter(item => item != null),
    };

    let httpCall;
    if (params.relationId) {
      httpCall = post(
        API_CONTEXT +
        '/online/onlineOperation/deleteBatchOneToManyRelation/' +
        table.datasource.variableName,
        params,
      );
    } else {
      httpCall = post(
        API_CONTEXT +
        '/online/onlineOperation/deleteBatchDatasource/' +
        table.datasource.variableName,
        params,
      );
    }
    httpCall
      .then(() => {
        ElMessage.success('删除成功！');
        refreshTable(true);
      })
      .catch(e => {
        console.warn(e);
      });
  });
};
const onDeleteRow = (row: ANY_OBJECT) => {
  ElMessageBox.confirm('是否删除当前数据？', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      let table = form2.value.tableMap.get(queryTable.value.bindData.tableId);
      let params = {
        datasourceId: table.datasource.datasourceId,
        relationId: (table.relation || {}).relationId,
        dataId: row[primaryColumnName.value],
      };
      let httpCall = null;
      if (params.relationId) {
        httpCall = post(
          API_CONTEXT +
          '/online/onlineOperation/deleteOneToManyRelation/' +
          table.datasource.variableName,
          params,
        );
      } else {
        httpCall = post(
          API_CONTEXT + '/online/onlineOperation/deleteDatasource/' + table.datasource.variableName,
          params,
        );
      }

      httpCall
        .then(() => {
          ElMessage.success('删除成功！');
          refreshTable(true);
        })
        .catch(e => {
          console.warn(e);
        });
      // Jie. 20250513 取消报错
    })
    .catch(e => {
      console.warn(e);
    });
};
const onImport = (operation: ANY_OBJECT, file: ANY_OBJECT | null) => {
  console.log(operation, file);
  let table = form2.value.tableMap.get(queryTable.value.bindData.tableId);
  if (file == null) {
    ElMessage.error('请选择要导入的文件！');
    return;
  }
  if (table == null) {
    ElMessage.error('未找到数据源！');
    return;
  }
  let url =
    API_CONTEXT + '/online/onlineOperation/importDatasource/' + table.datasource.variableName;
  let params = {
    datasourceId: table.datasource.datasourceId,
    importColumnIds: (operation.exportColumnList || [])
      .sort((val1: ANY_OBJECT, val2: ANY_OBJECT) => {
        return val1.showOrder - val2.showOrder;
      })
      .map((item: ANY_OBJECT) => {
        return item.columnId;
      }),
    duplicateVerifyColumns: (operation.exportColumnList || [])
      .filter(item => {
        return item.duplicateCheckColumn;
      })
      .map(item => {
        return item.columnId;
      }),
    skipHeader: operation.skipHeader,
    importFile: file,
  };
  fetchUpload(url, params)
    .then(() => {
      ElMessage.success('导入成功！');
      refreshTable(true);
    })
    .catch(e => {
      ElMessage.error(e);
    });
};
const onExport = (operation: ANY_OBJECT) => {
  ElMessageBox.confirm('是否导出表格数据？', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    let table = form2.value.tableMap.get(queryTable.value.bindData.tableId);
    let params = {
      datasourceId: table.datasource.datasourceId,
      relationId: (table.relation || {}).relationId,
      filterDtoList: getQueryParams(),
      exportInfoList: (operation.exportColumnList || []).sort(
        (val1: ANY_OBJECT, val2: ANY_OBJECT) => {
          return val1.showOrder - val2.showOrder;
        },
      ),
    };

    if (queryTable.value.relation != null) {
      params.filterDtoList.push({
        tableName: queryTable.value.table.tableName,
        columnName: queryTable.value.relation.slaveColumn.columnName,
        filterType: SysOnlineColumnFilterType.EQUAL_FILTER,
        columnValue: (dialogParams.value.masterTableData || {})[
          queryTable.value.relation.masterColumn.columnName
        ],
      });
    }

    let queryString = getQueryString();
    // 模糊查询
    if (
      Array.isArray(queryTable.value.props.likeQueryColumn) &&
      queryTable.value.props.likeQueryColumn.length > 0 &&
      queryString != null &&
      queryString !== ''
    ) {
      let queryColumn = queryTable.value.props.likeQueryColumn
        .map(item => {
          return item.join('.');
        })
        .join(',');
      if (!Array.isArray(params.filterDtoList)) params.filterDtoList = [];
      params.filterDtoList.push({
        columnName: queryColumn,
        filterType: 14,
        columnValue: queryString,
      });
    }

    if (
      !dialogParams.value.isEdit &&
      typeof queryTable.value.eventInfo[OnlineFormEventType.BEFORE_LOAD_TABLE_DATA] === 'function'
    ) {
      params = await queryTable.value.eventInfo[OnlineFormEventType.BEFORE_LOAD_TABLE_DATA](
        params,
        instanceData,
      );
    }

    if (params == null) {
      throw new Error();
    }

    try {
      // Jie. 20250718 添加导出文件名
      const fileName = operation.exportFileName || queryTable.value.showName;
      const dateStr = formatDate(new Date(), 'YYYYMMDDHHmmss');
      if (params.relationId) {
        await download(
          API_CONTEXT +
          '/online/onlineOperation/exportByOneToManyRelationId/' +
          table.datasource.variableName,
          params,
          fileName + '-' + dateStr + '.xlsx',
        );
      } else {
        await download(
          API_CONTEXT +
          '/online/onlineOperation/exportByDatasourceId/' +
          table.datasource.variableName,
          params,
          fileName + '-' + dateStr + '.xlsx',
        );
      }
      ElMessage.success('导出成功！');
    } catch (e) {
      ElMessage.error(e);
    }
  });
};

const onUpdate = (operation: ANY_OBJECT | null, row: ANY_OBJECT | null = null) => {
  if (operation == null) return;
  let table = form2.value.tableMap.get(queryTable.value.bindData.tableId);
  let params = {
    datasourceId: table.datasource.datasourceId,
    relationId: (table.relation || {}).relationId,
    masterData: {},
    slaveData: {},
  };
  if (operation.relationId != null) {
    // 更新从表
    params.slaveData = operation.updateColumnList.reduce((pre, cur) => {
      pre[cur.updateColumnName] = cur.updateValue;
      return pre;
    }, {});
  } else {
    // 更新主表
    params.masterData = operation.updateColumnList.reduce((pre, cur) => {
      pre[cur.updateColumnName] = cur.updateValue;
      return pre;
    }, {});
  }
  if (!operation.rowOperation) {
    // 批量更新
    if (selectRows.value.length <= 0) {
      ElMessage.error('请选择要更新的数据！');
      return;
    }
    params.dataIdList = selectRows.value
      .map(item => {
        return item[primaryColumnName.value];
      })
      .filter(item => item != null);
  } else {
    // 单条更新
    if (row == null || row[primaryColumnName.value] == null) {
      ElMessage.error('请选择要更新的数据！');
      return;
    }
    params.dataIdList = [row[primaryColumnName.value]];
  }
  let httpCall;
  let url;
  if (params.relationId) {
    httpCall = post(
      API_CONTEXT +
      '/online/onlineOperation/updateOneToManyRelationBatch/' +
      table.datasource.variableName,
      params,
    );
  } else {
    httpCall = post(
      API_CONTEXT +
      '/online/onlineOperation/updateDatasourceBatch/' +
      table.datasource.variableName,
      params,
    );
  }
  httpCall
    .then(res => {
      ElMessage.success(operation.name + '成功！');
      refreshTable(true);
    })
    .catch(e => {
      console.warn(e);
    });
};

const onOperationClick = (operation: ANY_OBJECT, row: ANY_OBJECT | null) => {
  if (dialogParams.value.isEdit) return;
  if (operation.type === SysCustomWidgetOperationType.BATCH_DELETE) {
    onBatchDelete();
  } else if (operation.type === SysCustomWidgetOperationType.DELETE) {
    if (row) onDeleteRow(row);
  } else if (operation.type === SysCustomWidgetOperationType.EXPORT) {
    onExport(operation);
  } else if (operation.type === SysCustomWidgetOperationType.IMPORT) {
    onImport(operation, row);
  } else if (operation.type === SysCustomWidgetOperationType.PRINT) {
    onPrint(operation, row, selectRows.value, queryTable.value.showName);
  } else if (operation.type === SysCustomWidgetOperationType.START_FLOW) {
    console.log('启动流程');
    onStartFlow(operation, row);
  } else if (operation.type === SysCustomWidgetOperationType.UPDATE) {
    onUpdate(operation, row);
  } else if (operation.type === SysCustomWidgetOperationType.SCRIPT) {
    handlerScriptOperation(operation, row).catch(e => {
      console.warn(e);
    });
  } else {
    let updateIdList = [];
    if (operation.type === SysCustomWidgetOperationType.UPDATE_DIALOG) {
      // 弹窗更新操作
      if (operation.rowOperation) {
        // 单条更新
        if (row == null) {
          ElMessage.error('请选择要更新的数据！');
          return;
        }
        updateIdList = [row[primaryColumnName.value]];
      } else {
        // 批量更新
        if (selectRows.value.length <= 0) {
          ElMessage.error('请选择要更新的数据！');
          return;
        }
        updateIdList = selectRows.value.map(item => {
          return item[primaryColumnName.value];
        });
      }
    }
    handlerOperation(operation, {
      isEdit: dialogParams.value.isEdit,
      isUpdate: operation.type === SysCustomWidgetOperationType.UPDATE_DIALOG,
      updateIdList: updateIdList,
      rowData: row,
      masterTableData: dialogParams.value.masterTableData || row,
      callback: () => {
        refreshTable();
      },
    });
  }
};
const onReset = () => {
  activeWidgetList.value.forEach(widget => {
    onValueChange(widget, undefined);
  });
  refreshTable(true);
};
const initFormData = () => {
  refreshTable(true);
};

onMounted(() => {
  isReady.value = false;
  if (!dialogParams.value.isEdit) {
    if (
      form2.value.eventInfo &&
      typeof form2.value.eventInfo[OnlineFormEventType.AFTER_CREATE_FORM] === 'function'
    ) {
      form2.value.eventInfo[OnlineFormEventType.AFTER_CREATE_FORM](instanceData);
    }
    initFormData();
    initWidgetLinkage();
    if (tableInstance) {
      tableInstance[form2.value.tableWidget?.variableName] = {
        getRef: () => {
          return table.value.getTableInstance();
        },
      };
    }
  }
  isReady.value = true;
});
</script>

<style scoped>
.online-query-form.select-dialog :deep(.table-box) {
  padding: 16px;
}

.header-logo {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  text-align: center;
  color: #fda834;
  background: rgb(255 119 0 / 10%);
  border-radius: 8px;
  line-height: 40px;
}

.el-divider--vertical {
  height: 26px;
  margin: 7px 15px;
}

.online-query-form {
  display: flex;
  flex-direction: column;
}

.online-query-form .query-filter-box {
  flex-grow: 0;
  flex-shrink: 0;
}

.online-query-form .query-table-box {
  flex-shrink: 1;
  height: 200px;
  flex-grow: 1;
}
</style>
